<template>
  <div>
    <el-form :model="formData" inline style="display: flex;justify-content: flex-end;margin-top: 10px;">
      <el-form-item prop="userId">
        <el-input v-model="formData.userId" placeholder="请输入用户id"></el-input>
      </el-form-item>
      <el-form-item prop="orderSn">
        <el-input v-model="formData.orderSn" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item prop="orderStatus">
        <el-select v-model="formData.orderStatus" filterable clearable placeholder="请输入订单状态">
        <el-option
        v-for="item in accountStatus"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column align="center" label="订单编号" prop="orderSn"></el-table-column>
      <el-table-column align="center" label="用户id" prop="userId"></el-table-column>
      <el-table-column align="center" label="订单状态" prop="orderStatus">
        <template slot-scope="scope">
          <el-tag>{{scope.row['orderStatus'] | tableFilter(accountStatus)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额" prop="orderPrice"></el-table-column>
      <el-table-column align="center" label="支付金额" prop="actualPrice"></el-table-column>
      <el-table-column align="center" label="支付时间" prop="payTime"></el-table-column>
      <el-table-column align="center" label="物流单号" prop="shipSn"></el-table-column>
      <el-table-column align="center" label="物流渠道" prop="shipChannel"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="xqing(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

     <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500"
    >
      <el-form  :title="dialogTitle" :model="dialogFormData" label-width="100px">
        <el-form-item label="订单编号" prop="orderSn">
          {{dialogFormData.orderSn}}
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-tag>{{dialogFormData.orderStatus | tableFilter(accountStatus)}}</el-tag>
          <!-- {{dialogFormData.orderStatus}} -->
        </el-form-item>
        <el-form-item label="订单用户" prop="cosignee">
          {{dialogFormData.consignee}}
        </el-form-item>
        <el-form-item label="用户留言" prop="message">
          {{dialogFormData.message}}
        </el-form-item>
       <el-form-item label="收货信息">
          {{'名字:'+dialogFormData.consignee+',电话:'+dialogFormData.mobile+',地址:'+dialogFormData.address}}      
       </el-form-item>

          <el-table :data="diaTableData" border>
            <el-table-column sortable align="center" label="商品名称" prop="goodsName"></el-table-column>
            <el-table-column align="center" label="商品编号" prop="goodsSn"></el-table-column>
            <el-table-column align="center" label="商品规格" prop="specifications"></el-table-column>
            <el-table-column align="center" label="商品价格" prop="price"></el-table-column>
            <el-table-column align="center" label="商品数量" prop="number"></el-table-column>
            <el-table-column align="center" label="商品图片" prop="picUrl">
              <template slot-scope="scope">
                <img :src="scope.row.picUrl" alt="" style="width:40px;">
              </template>
            </el-table-column>
          </el-table>   
       
       <el-form-item label="费用信息">
          {{'(实际费用)'+dialogFormData.orderPrice+'='+'(商品总价)'+dialogFormData.goodsPrice+'+'+'(快递费用)'+dialogFormData.freightPrice+'-'+'(优惠减免)'+dialogFormData.couponPrice+'-'+'(积分减免)'+dialogFormData.integralPrice}}      
       </el-form-item>

       <el-form-item label="支付信息">
          {{'（支付渠道）'+dialogFormData.payId+'（支付时间）'+dialogFormData.payTimee}}      
       </el-form-item>

       <el-form-item label="快递信息">
          {{'（快递公司）'+dialogFormData.shipSn+'（快递单号）'+dialogFormData.shipChannel+'（发货时间）'+dialogFormData.shipTime}}      
       </el-form-item>

       <el-form-item label="收货信息">
          {{'（确认收货时间）'+dialogFormData.endTime}}      
       </el-form-item>
      </el-form>

      <span slot="footer">
      </span>
    </el-dialog>   
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'orderManage',
  componentTitle: '订单管理',
  data () {
    return {
      dialogTitle:'详情',     
      pageInfo: {
        page: 1,
        limit: 20,
        total: 0
      },
      formData:{
        userId:'',
        orderSn:'',
        orderStatus:[]
      },
      tableData:[],
      accountStatus:[
        {label:"未付款",value:'101'},
        {label:"用户取消",value:'102'},
        {label:"系统取消",value:'103'},
        {label:"已付款",value:'201'},
        {label:"申请退款",value:'202'},
        {label:"已退款",value:'203'},
        {label:"已发货",value:'301'},
        {label:"用户收货",value:'401'},
        {label:"系统收货",value:'402'},
      ],
      dialogVisible:false,
      dialogFormData:{
        orderSn:'',
        orderStatus:'',
        cosignee:'',
        message:''
      },
      diaTableData:[]
    }
  },
  mounted(){
     this.search()
  },
  filters: {
    tableFilter (value, options) {
      let index = options.findIndex(item => {
        return Number(item.value) === Number(value)
      })

      if (index < 0) {
        return '---'
      } else {
        return options[index].label
      }
    }
  },
  methods:{
    search () {
      axios({
        url: 'http://192.168.200.251:8888/admin/order/list',
        method: 'get',
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableData = res.data.data.list

        this.pageInfo.total = res.data.data.total
        console.log(res)
      })
    },
    xqing(row){
      this.dialogVisible=true
      axios({
        url: 'http://192.168.200.251:8888/admin/order/detail',
        method: 'get',
        params:{
         id:row.id
         },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res=>{
        this.dialogFormData=res.data.data.order
        this.diaTableData=res.data.data.orderGoods
      })
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>


